<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import ClientSelect from "@renderer/components/ClientSelect/Index.vue";
import StepSelect from "@renderer/components/StepSelect/Index.vue";
import { useSystemStoreHook } from "@renderer/store/modules/system";
import { useGradeStoreHook } from "@renderer/store/modules/grade";

const selectValue = ref("");
const steps = ["测试1", "测试2", "测试3"];

const gradeBtnSpan = computed(() => {
  const itemSpan = grades.value.length * 6;
  return 24 - (itemSpan % 24);
});

const systemStore = useSystemStoreHook();
const gradeStore = useGradeStoreHook();

const count = computed(() => {
  const t1 = gradeStore.dataset[0];
  return t1.data[t1.data.length - 1]["合计"];
});

const grades = computed(() => {
  const res = systemStore.grades.map((d) => {
    return {
      name: d.gradeName,
      options: d.options.map((opt) => ({ label: opt, value: opt }))
    };
  });
  return res;
});

const standardGrades = reactive([undefined, undefined]);

const standardRates = computed(() => {
  const t1 = gradeStore.dataset[0];
  const sk = t1.data[t1.data.length - 2]["K"];
  const s3 = t1.data[4]["偏档"];
  return [
    Math.round(((count.value - sk) / count.value) * 100) + "%",
    Math.round(((count.value - s3) / count.value) * 100) + "%"
  ]
})

const options = [
  {
    label: "厂区1",
    value: "area1",
    children: [
      {
        label: "零件类型1",
        value: "type1",
        children: [
          { label: "产线1", value: "line1" },
          { label: "产线2", value: "line2" }
        ]
      },
      {
        label: "零件类型2",
        value: "type2",
        children: [
          { label: "产线3", value: "line3" },
          { label: "产线4", value: "line4" }
        ]
      }
    ]
  },
  {
    label: "厂区2",
    value: "area2",
    children: [
      {
        label: "零件类型3",
        value: "type3",
        children: [
          { label: "产线5", value: "line5" },
          { label: "产线6", value: "line6" }
        ]
      },
      {
        label: "零件类型4",
        value: "type4",
        children: [
          { label: "产线7", value: "line7" },
          { label: "产线8", value: "line8" }
        ]
      },
    ]
  },
]
</script>

<template>
  <el-card class="box" header="基础信息">
    <el-form label-width="72px" label-position="top" size="large">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="零件类型">
            <ClientSelect v-model="systemStore.partType" :options="systemStore.partTypeOptions" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物料编码">
            <StepSelect v-model="selectValue" :steps="steps" :options="options" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加工线">
            <StepSelect v-model="selectValue" :steps="steps" :options="options" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工位">
            <StepSelect v-model="selectValue" :steps="steps" :options="options" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="来料准档">
        <!-- 左右需要各让出6px才能与其他行对齐，因此需要增加12px，与gutter值一致 -->
        <el-row :gutter="12" style="width: calc(100% + 12px)">
          <el-col
            v-for="(grade, index) in grades"
            :key="grade.name"
            :span="6"
            style="margin-bottom: 12px"
          >
            <ClientSelect
              v-model="standardGrades[index]"
              :placeholder="grade.name"
              :options="grade.options"
              :fullscreen="false"
            />
          </el-col>
          <el-col :span="gradeBtnSpan">
            <el-button type="danger" style="width: 100%">开始采集</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-divider />
    </el-form>
    <el-form size="large">
      <el-form-item label="总数">
        <div class="count">{{ count }}</div>
        <div style="font-size: 24px">件</div>
      </el-form-item>
      <el-row :gutter="24">
        <el-col v-for="(st, index) in systemStore.gradeStatistic" :key="st.name" :span="12">
          <el-form-item :label="st.name">
            <el-input readonly :value="standardRates[index]" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="primary" style="width: 100%">清 空</el-button>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss">
.box {
  height: calc(100% - 2px);
}
.count {
  font-size: 48px;
  margin-right: 12px;
  color: var(--el-color-primary);
}
</style>
